<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min-2.6.11.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            数据单向绑定： 视图中的 绑定值 内容发生变化 不会 影响 data对象里面的 属性值
                        data对象里面的 属性值 发生变化 会影响视图中 绑定值得内容
         -->
        <h1 v-text="msg"></h1>

        <!-- 
            注意： 只有 表单元素 才能使用 双向数据绑定 
        -->

        <!-- v-bind: 是单向绑定数据的 -->
        <input type="text" :value="text" style="width: 100%;">

        <!-- 
            v-model 这指令 设置数据的 双向绑定
            v-model="text"
         -->
        <input type="text" v-model="text" style="width: 100%;">


    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '这是一个 大大的 H1 标签',
                text: '1551515'
            }
        })
    </script>
</body>

</html>